{% extends 'layui/edit.html' %}
{% load i18n static common %}
{% block edit_form %}
  <form class="layui-form data-form" action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div>
      {% with form.form as f %}
        <div class="layui-form-item">
          {% layui_inline f.start_date %}
          {% layui_inline f.end_date %}
        </div>
        <div class="layui-form-item">
          {% layui_inline f.workflow_code %}
          {% layui_inline f.workflow_name %}
        </div>
        <div class="layui-form-item">
          {% layui_inline f.content_type %}
          {% layui_inline f.applicant_position %}
          {% layui_inline f.departments %}
          <div class="layui-inline field-before field-employee">
            <label class="layui-form-label"
                   for="id_type">{% trans 'workflowEngine_field_employee' %}</label>
            <div class="layui-input-inline ">
              <input name="type" id="id_type" lay-filter="id_type" value="" class="layui-input" readonly>
              <div id="employee_origin">
                <script>
                  var employee_origin_name = '';
                  var globalEmpSelected = [];
                  {% if f.instance.id %}
                    {% for item in f.instance.employee.all %}
                      $('#employee_origin').append('<input type="hidden" name="employee" value="{{ item.id }}"/>');
                      employee_origin_name = '{{ item.emp_code }}' + ',' + employee_origin_name;
                      var emp_item = {
                        id: {{ item.id }},
                        emp_code: '{{ item.emp_code }}',
                        {% if item.first_name %}
                          first_name: '{{ item.first_name }}',
                        {% else %}
                          first_name: '',
                        {% endif %}
                        {% if item.last_name %}
                          last_name: '{{ item.last_name }}',
                        {% else %}
                          last_name: '',
                        {% endif %}
                        {% if item.department.dept_name %}
                          dept_name: '{{ item.department.dept_name }}',
                        {% else %}
                          dept_name: '',
                        {% endif %}
                      }
                      globalEmpSelected.push(emp_item)
                    {% endfor %}
                  {% endif %}
                  $('#id_type')[0].value = employee_origin_name;
                </script>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-hide">{{ f.workflow_node }}</div>
        <div class="layui-hide" id="workflow_type_flag">{{ workflow_type }}</div>
        <div id="field-approvers" class="layui-hide"></div>
        <div id="field-notifiers" class="layui-hide"></div>
      {% endwith %}
      <a class="layui-btn add-workflow-node" style="background: #d8dce1; border-color: #e7e7e7; color: #777777;"><i class="layui-icon layui-icon-add-circle"></i>{% trans "common_action_new" %}</a>
      <div class="layui-tab layui-tab-card" lay-filter="nodes-tab" lay-allowclose="true" style="width: 680px">
        <ul id="tab-title-id" class="layui-tab-title">
        </ul>
        <div id="tab-content-id" class="layui-tab-content" style="height: 200px; padding-top: 20px">
        </div>
      </div>
    </div>
    <script>
      layui.use(['table', 'form', 'element', 'layer'], function () {
        var table = layui.table, layer = layui.layer, form = layui.form, element = layui.element;

        var workflow_type_flag = $("#workflow_type_flag").text();

        // hide field
        if (workflow_type_flag === '1') {
          $('.field-applicant_position').css('display', 'none')
          $('.field-employee').css('display', 'none')
        } else if (workflow_type_flag === '2') {
          $('.field-departments').css('display', 'none')
          $('.field-employee').css('display', 'none')
        } else {
          $('.field-applicant_position').css('display', 'none')
          $('.field-departments').css('display', 'none')
        }

        var auto_id = 1;
        addBlankTab = function() {
          //新增一个Tab项
          $.get("/workflow/workflownode/add/",function(data){
            element.tabAdd('nodes-tab', {
              title: '&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-group"></i>&nbsp;&nbsp;&nbsp;&nbsp;'
              ,content: data
              ,id: auto_id
            })
            element.tabChange('nodes-tab', auto_id);
            auto_id = auto_id + 1;
          });
        }
        addNodeTab = function(obj_id) {
          //新增一个Tab项
          $.ajax({
            url: "/workflow/workflownode/edit/?obj_id=" + obj_id,
            async: false,
            success: function(data){
              element.tabAdd('nodes-tab', {
                title: '&nbsp;&nbsp;&nbsp;<i class="layui-icon layui-icon-group"></i>&nbsp;&nbsp;&nbsp;&nbsp;'
                ,content: data
                ,id: auto_id
              })
              element.tabChange('nodes-tab', auto_id);
              auto_id = auto_id + 1;
            }
          });
        }
        $('.add-workflow-node').on('click', function(){
          addBlankTab()
        });

        var node_ids = $("#id_workflow_node").val();
        if (node_ids) {
          node_ids.split(";").forEach(function(value, index) {
            addNodeTab(value)
          });
        } else {
          addBlankTab()
        }

        if (globalEmpSelected.length) {
          $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("disabled", "disabled")
          $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("value", "")
          $('#{{ model_name }}_edit_form input[name^="applicant_position"]').attr("value", "");
          $('#{{ model_name }}_edit_form input[id^="departments"]').attr("disabled", "disabled")
          $('#{{ model_name }}_edit_form input[id^="departments"]').attr("value", "")
          $('#{{ model_name }}_edit_form input[name^="departments"]').attr("value", "");
        }

        // 提交时处理notifiers 和 approvers
        $('.layui-layer-btn0').on('click', function(){
          var approvers_html = ''
          $('.field-approver').find('.tree-select').each(function(){
            var role_ids = []
            $('#' + $(this).attr('id') + '_hide').children('input').each(function(){
              role_ids.push($(this).attr('value'))
            });
            approvers_html += interpolate('<input name="%s" value="%s"/>', ['approvers', role_ids.join(';')]);
          });
          $("#field-approvers").html(approvers_html)

          var notifiers_html = ''
          $('.field-notifier').find('.tree-select').each(function(){
            var role_ids = []
            $('#' + $(this).attr('id') + '_hide').children('input').each(function(){
              role_ids.push($(this).attr('value'))
            });
            notifiers_html += interpolate('<input name="%s" value="%s"/>', ['notifiers', role_ids.join(';')]);
          });
          $("#field-notifiers").html(notifiers_html)

        });

        $('#id_type').click(function () {
          $.ajax({
              url: "/personnel/filter_resign_employee/",
              type: "GET",
              dataType: "html",
              success: function(pannel) {
                  layer.open({
                      type: 1,
                      title: "{% trans 'workflowEngine_field_employee' %}",
                      zIndex: 1003,
                      area: ['1080px', '550px'],
                      content: pannel,
                      btn: [gettext("btn_confirm"), gettext("btn_cancel")],
                      success: function(layero, index){
                        // 将globalEmpSelected初始化到selected table
                        for (i = 0; i < globalEmpSelected.length; i++) {
                            globalEmpSelected[i]['LAY_CHECKED'] = true;
                        }
                        var selected_table = table.reload('id-employee-frame-selected', {data: globalEmpSelected});
                        // 将globalEmpSelected初始化到unselect table
                        var unselect = table.reload('id-employee-frame-unselect');
                      },
                      yes: function(index, layero){
                        var name_val = $('#employeeFrameSelectedDetailContainer').val()
                        $('#id_type')[0].value = name_val;
                        $('#employee_origin').html('')
                        globalEmpSelected = layui.table.checkStatus('id-employee-frame-selected').data;
                        for (i = 0; i < globalEmpSelected.length; i++) {
                            $('#employee_origin').append('<input type="hidden" name="employee" value="' + globalEmpSelected[i].id + '"/>');
                        }
                        if (globalEmpSelected.length) {
                          $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("disabled", "disabled")
                          $('#{{ model_name }}_edit_form input[id^="applicant_position"]').attr("value", "")
                          $('#{{ model_name }}_edit_form input[name^="applicant_position"]').attr("value", "");
                          $('#{{ model_name }}_edit_form input[id^="departments"]').attr("disabled", "disabled")
                          $('#{{ model_name }}_edit_form input[id^="departments"]').attr("value", "")
                          $('#{{ model_name }}_edit_form input[name^="departments"]').attr("value", "");
                        } else {
                          $('#{{ model_name }}_edit_form input[id^="applicant_position"]').removeAttr("disabled")
                          $('#{{ model_name }}_edit_form input[id^="departments"]').removeAttr("disabled")
                        }
                        layer.close(index)
                      }
                  });
              },
              error: function(response) {
                  console.log(response.responseText);
              }
          })
        });
      });
    </script>
  </form>

{% endblock %}